<template>
  <uni-popup ref="groundPo" type="center">
    <view class="Ground">
      <view class="space-between groupList">
        <view class="column" v-for="(item,index) in getList" :key="index" @click="changes(item.id)"
          :style="{color:id===item.id?'#fff':'',background:id===item.id?'#1D8DFF':''}">{{item.name}}</view>
      </view>
      <view class="but" @click="submit()">确定</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { getStaffList } from '@/gql/earthPushing/dispatch';
  import { getStaffLis } from '@/gql/dispatch';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  import { useUserInformation } from '@/stores/earthPushing/userSale';
  const userInfo = useUserInformation();
  const staff_id = getDriverID();
  const props = defineProps({
    task_id: {
      type: Number,
    },
    staffId: {
      type: Number,
    },
    type: {
      type: String,
    }
  });
  const emit = defineEmits(['berplate']);
  const getList = ref()
  const id = ref()
  const groundPo = ref(null)
  init()
  function init() {
    showLoading()
    const payload = {
      query: getStaffList,
      variables: {
        staff_id,
        delivery_id: userInfo.delevery_id
      },
    };
    toPublish(
      'ql/staff/getStaffList',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getStaffList } = obj.data;
        getList.value = getStaffList
      }
    );
  }
  function changes(ids : number) {
    id.value = ids
  }
  function submit() {
    if (!id.value) {
      errorToast('请选择您要转单的对象')
      return
    }
    if (props.type === 'admin') {
      Transfer()
    } else {
      showLoading()
      const payload = {
        to_staff_id: Number(id.value),
        from_staff_id: staff_id,
        task_id: props.task_id
      };
      toPublish('staff/zhuanDan',
        payload,
        (obj : any) => {
          uni.hideLoading();
          const { code, msg } = obj;
          groundPo.value.close()
          if (code === 1) {
            successToast(msg)
            emit('berplate')
          } else {
            errorToast(msg)
          }
        }
      );
    }
  }
  function Transfer() {
    showLoading()
    const payload = {
      to_staff_id: Number(id.value),
      admin_id: staff_id,
      task_id: props.task_id
    };
    toPublish('control/zhuanDan',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        groundPo.value.close()
        if (code === 1) {
          successToast(msg)
          emit('berplate')
        } else {
          errorToast(msg)
        }
      }
    );
  }
  function open(id : any) {
    if (props.type === 'admin') {
      showLoading()
      const payload = {
        query: getStaffLis,
        variables: {
          staff_id: id,
        },
      };
      toPublish(
        'ql/control/getStaffList',
        payload,
        (obj : any) => {
          uni.hideLoading();
          const { getStaffList } = obj.data;
          getList.value = getStaffList
          groundPo.value.open()
        }
      );
    } else {
      groundPo.value.open()
    }
  }
  defineExpose({ open });
</script>

<style scoped lang="less">
  .Ground {
    width: 650rpx;
    background-color: white;
    border-radius: 5px;
    padding: 20rpx;
    box-sizing: border-box;
  }

  .groupList {
    width: 100%;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: auto;
    height: 40vh;

    view {
      width: 48%;
      height: 102rpx;
      background: #EAEAEA;
      border-radius: 10rpx;
      text-align: center;
      margin-bottom: 20rpx;
    }
  }

  .but {
    width: 284rpx;
    height: 82rpx;
    background: #1D8DFF;
    border-radius: 10rpx;
    text-align: center;
    line-height: 82rpx;
    color: #fff;
    margin: 20rpx auto 0px;
  }
</style>